v2.0.0 #2038
Merged
v2.0.0 #2038
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
sungik-choi
commented
Feb 29, 2024
•
sungik-choi
commented
- Close v2.0.0 #1800
- Check stability for breaking changes
- Check for minor issues
- Exit changeset prerelease mode (v2.0.0)
* feat(tokens): add core token * feat(tokens): change to mixin * feat(tokens): add semantic tokens * feat(tokens): merge tokens * chore(dev-deps): add sass * fix(tokens): change from underscore to hypen * feat(tokens): implement tokens layer structure * feat(styles): create styles dir and structure * feat(tokens): add bezier namspace to data attr * chore(dev-deps): add css reset * feat(styles): add reset and base layer * feat(styles): enhance monospace font stack * style(styles): change comment type to avoid including in css https://sass-lang.com/documentation/syntax/comments/ * feat(styles): add data attr selector to light theme semantic token * feat(styles): add utilities layer and todo comment
… classname-based styling (#1488) * chore(d.ts): add scss module declaration * style(eslint): add scss module pattern to eslint import order rule * test(story): sass environment setting * feat(spinner): change to classname-based styling * docs(component-props): deprecated interpolation prop * refactor(d.ts): change target module pattern * chore(storybook): delete mock style * refactor(spinner): rename component to element * chore(env): enhance to support CSS modules in TS * fix: delete unused ts interface * chore(styles): apply temporary relative path * style(storybook): apply tilde alias * fix(spinner): fix xl size * refactor(spinner): use mixin * test(spinner): rm test cases that don't work * test: update snapshot * test(spinner): enhance * test(spinner): add test case for forward ref * chore: change code owner * test(spinner): add test case for color prop
* feat(styles): add rollup-postcss-plugin and set up build config * chore(pkg): add css files to side effects and sub path module * chore(changeset): add changeset * build(rollup): add custom generate scoped name string
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English**. - [x] I added an appropriate **label** to the PR. - [x] I wrote a commit message in **English**. - [x] I wrote a commit message according to [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [ ] [I added the appropriate **changeset**](https://github.com/channel-io/bezier-react/blob/main/CONTRIBUTING.md#add-a-changeset) for the changes. - [ ] [Component] I wrote **a unit test** about the implementation. - [ ] [Component] I wrote **a storybook document** about the implementation. - [ ] [Component] I tested the implementation in **various browsers**. - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox - [ ] [*New* Component] I added my username to the correct directory in the `CODEOWNERS` file. ## Summary <!-- Please add a summary of the modification. --> - postcss presetenv를 추가합니다 - alpha << main branch merge conflict를 해소합니다. (누락된 storybook styling addon 추가 등) ## Details <!-- Please add a detailed description of the modification. (such as AS-IS/TO-DO)--> 올해 7월에 본래 CSS cascade layer polyfill을 위해 작업한 PR이었으나, 현재 (2023/11/16) 동일한 브라우저 타겟으로 재빌드 시 polyfill이 생성되지 않아 PR 컨텍스트를 변경했습니다. (#1510 (comment)) ## Breaking change or not (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> 없음. ## References <!-- External documents based on workarounds or reviewers should refer to --> - https://www.npmjs.com/package/postcss-preset-env
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> Fixes #994 ## Summary <!-- Please brief explanation of the changes made --> 베지어 디자인 시스템의 디자인 토큰 패키지인 bezier-tokens 패키지를 추가합니다. > **디자인 토큰이 무엇인가요?** > > Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations. (from w3c dtcg) > > - https://design-tokens.github.io/community-group/format/ > - https://m3.material.io/foundations/design-tokens/overview ## Details <!-- Please elaborate description of the changes --> ### Note - 여러 디자인 토큰 변환 라이브러리를 리서치해보았습니다. 사용자의 규모와 향후 업데이트 로드맵, 커스터마이즈 가능 범위 등을 살펴보았을 때, Style dictionary가 가장 적절하다고 생각하여 선택하였습니다. - 디자인 토큰을 피그마에서 연동하기에는 현상황에서 어려웠습니다. 현재 피그마 Variables가 오픈베타여서 타이포그래피 등의 토큰 등을 지원하고 있지 않는 상황입니다. 또한 피그마 Variables의 등장으로 Token Studio같은 서드파티 플러그인을 사용하지 않기로 팀 내부에서 결정했기 때문에, 피그마 Variables의 스펙이 언제든지 추가되거나 변할 수 있다는 뜻입니다. 따라서 지금 피그마-소스 코드 변환기를 구현하는 건 시기상조라고 생각했습니다. - 현재 작업중인 새로운 디자인 시스템에 토큰을 적용하지 않고, 기존의(프로덕션) 레거시 디자인 토큰을 적용했습니다. 정확히는 현재 bezier-react의 Foundation들을 디자인 토큰으로 분해했습니다(= 피그마에는 토큰으로 분류되지 않은 경우도 있습니다). 토큰 적용 & 정적 스타일링 방식으로 변경 -> 새로운 디자인 토큰 적용으로 단계를 나누어가기 위해서입니다. ### Build step 빌드는 간략하게 다음의 과정으로 이루어집니다. 1. JSON(Design token)을 cjs/esm/css 로 변환합니다. 2. 변환된 cjs/esm 의 엔트리포인트(index.js)를 만듭니다. 3. 타입스크립트 컴파일러를 통해 변환된 js 파일로부터 타입 선언을 만듭니다. - **향후 1번의 변환 과정에 iOS, Android용 스타일 변환기, JSON 변환기 등을 추가할 수 있습니다.** - 1번의 변환 과정은 글로벌 토큰(기존의 팔레트, 레디우스 등)과 시맨틱 토큰(라이트/다크 테마)이 별개로 이루어집니다. 라이트/다크 테마를 함께 빌드하게 되면 키가 충돌했다는 메세지와 함께 빌드 에러가 발생합니다. themeable같은 속성을 사용할 수도 있으나, JSON에 style-dictionary 라이브러리에 종속적인 속성을 포함시키고 싶지 않았습니다. 토큰은 더 순수하게 두는 게 나중을 위하여 좋다고 판단했습니다. - Composite token(예: 타이포그래피)를 지원하지 않습니다. 현재 공식적으로 지원하지 않는 스펙이며, 현상황에서는 개별 토큰들을 bezier-react(그 외 각 플랫폼 디자인 시스템)에서 조합해도 큰 무리가 없다고 판단했습니다. #### File tree ```md dist ┣ cjs ┃ ┣ darkTheme.js ┃ ┣ global.js ┃ ┣ index.js ┃ ┗ lightTheme.js ┣ css ┃ ┣ dark-theme.css ┃ ┣ global.css ┃ ┗ light-theme.css ┣ esm ┃ ┣ darkTheme.mjs ┃ ┣ global.mjs ┃ ┣ index.mjs ┃ ┗ lightTheme.mjs ┗ types ┃ ┣ cjs ┃ ┃ ┣ darkTheme.d.ts ┃ ┃ ┣ darkTheme.d.ts.map ┃ ┃ ┣ global.d.ts ┃ ┃ ┣ global.d.ts.map ┃ ┃ ┣ index.d.ts ┃ ┃ ┣ index.d.ts.map ┃ ┃ ┣ lightTheme.d.ts ┃ ┃ ┗ lightTheme.d.ts.map ┃ ┗ esm ┃ ┃ ┣ darkTheme.d.mts ┃ ┃ ┣ darkTheme.d.mts.map ┃ ┃ ┣ global.d.mts ┃ ┃ ┣ global.d.mts.map ┃ ┃ ┣ index.d.mts ┃ ┃ ┣ index.d.mts.map ┃ ┃ ┣ lightTheme.d.mts ┃ ┃ ┗ lightTheme.d.mts.map ``` ### Next - 이 패키지의 js, css를 가지고 bezier-react의 스타일 시스템, 테마 기능을 구성하게 됩니다. (#1690) - 이 패키지의 토큰에 더해 bezier-react의 constants(disabled 0.4, z-index), 타이포그래피 등을 bezier-react에서 추가, 확장하여 최종적으로 사용자 애플리케이션에 제공하는 방향으로 구현하고자 합니다. (#1495 에서 작업) ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://amzn.github.io/style-dictionary - https://dbanks.design/blog/dark-mode-with-style-dictionary/ - amzn/style-dictionary#848 : Composite token 관련 이슈
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> bezier-tokens 패키지의 초기 버전을 0.0.0 으로 설정하고, changeset에 의해서 0.1.0 으로 버전업되도록 합니다.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Minor Changes - First release ([#1685](#1685)) by @sungik-choi Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> bezier-react 스타일 시트의 tokens layer에 bezier-tokens를 적용합니다. ## Details <!-- Please elaborate description of the changes --> - bezier-tokens alpha.0 버전을 의존성으로 추가하고, 내보낸 토큰 스타일시트를 import 합니다. - base layer에서 tokens layer의 토큰을 사용하게 되어서, 의미상 base layer가 tokens 레이어 뒤에 위치하는 게 적합하다고 판단하여 이동 및 디자인 토큰을 적용합니다. - css reset 의존성 최신 버전으로 업데이트 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1685
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> design token의 잘못된 설정을 몇 수정하고, 리팩토링을 적용합니다. ## Details <!-- Please elaborate description of the changes --> - font-familiy 토큰을 올바른 포맷으로 수정합니다. 불필요해진 system-font 토큰은 제거합니다. - radius 토큰에 누락된 px 유닛을 추가합니다. - cjs/esm 빌드에서 basePxFontSize가 누락되어 rem이 16px 기준으로 계산되고 있었던 걸 수정합니다. - 리팩토링: 변수명 수정 및 함수 분리 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes (alpha version)
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Minor Changes - Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector. ([#1495](#1495)) by @sungik-choi ## @channel.io/[email protected] ### Minor Changes - Remove unused tokens and add missing unit to radius tokens. ([#1752](#1752)) by @sungik-choi ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…cts (#1766) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> - z-index와 opacity 디자인 토큰을 추가합니다. - 모든 플랫폼을 위한 토큰은 아니고, bezier-react에서만 사용하기 위한 임시 토큰으로 추가했습니다. (기존 `Constants/` 디렉터리 하위) - JS 빌드 아티팩트에 토큰별 카테고리를 추가합니다. json 파일명이 토큰의 카테고리가 됩니다. 기존 `SemanticNames` 과 같이 카테고리별타입스크립트 타입을 쉽게 뽑아내기 위한 변경입니다. ## Details <!-- Please elaborate description of the changes --> 토큰별 카테고리에 대해: 아래와 같이 타입을 추출하여 사용할 수 있습니다. ```tsx // AS-IS color: SemanticNames // TO-BE color: keyof typeof tokens.lightTheme.color ``` JS 빌드 아티팩트가 아래와 같은 형식으로 변경됩니다. ```tsx // AS-IS 모두 1-depth로 flat한 구조 // TO-BE export default { "color": { ... } "typography": { ... } ... } ``` > 생각들: > 색상 토큰에 color prefix를 붙이는 걸 고민했으나, 기존 팀의 컨벤션과 마이그레이션 비용을 고려하여 작업하지 않았음. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> #1766 의 변경사항을 README에도 적용합니다.
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [ ] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> Fixes #1690 ## Summary <!-- Please brief explanation of the changes made --> data attributes를 기반으로 한 멀티 테마 기능을 구현합니다. ## Details <!-- Please elaborate description of the changes --> foundation 객체를 주입받는 형식에서, themeNam 문자열을 주입받아 하위 엘리먼트(루트 엘리먼트가 되길 기대)의 data attribute를 변경 & 해당하는 토큰 객체를 컨텍스트로 전달하는 AppProvider를 구현합니다. - features prop: 사용 편의성을 위해 `FeatureProvider` 를 빌트인으로 가지는 방향으로 변경했습니다. 기본값은 빈 배열입니다. - BezierProvider to AppProvider: 앱의 루트에 적용하는 Provider라는 점을 강조하기 위해 Bezier 대신 App이라는 접두어를 붙였습니다. 라이트테마, 다크테마 혹은 테마 역전(Tooltip 등)이 필요한 곳에서 테마를 고정해서 사용할 수 있는 ThemeProvider를 구현합니다. 이제 `--inverted-` 토큰이 사라지는 대신, 하위 엘리먼트에 radix-ui Slot을 통해 data theme attribute를 전달하여 토큰을 스위칭하는 방식으로 동작하게 됩니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No. 기존 BezierProvider는 그대로 유지합니다. ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://www.radix-ui.com/themes/docs/components/theme - https://panda-css.com/docs/guides/multiple-themes - https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/AppProvider/AppProvider.tsx
…licate CSS (#1779) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> - Composition token의 스펙을 DTCG format과 비슷하게 정의하고, 커스텀 Transformer를 구현합니다. - 공통 Semantic token이 불필요하게 라이트 테마, 다크 테마에 중복해서 들어가던 문제를 수정합니다. ## Details <!-- Please elaborate description of the changes --> - Composition token이 CSS spec에 의존하지 않도록 [DTCG format](https://design-tokens.github.io/community-group/format/#composite-types)을 참고하여 수정했습니다. shadow와 transition 타입에 적용했습니다. - letter-spacing에도 rem 단위를 적용합니다. dimension type을 만들어서 기존 font-size와 line-height에 적용하던 custom Transformer를 적용했습니다. - 공통 Semantic token이 불필요하게 들어가는 문제를 해결하기 위해서는 기존 defineConfig 함수를 해체하는 것이 불가피했습니다. CSS/JS 빌드를 구분하는 플래그 등을 만들어서 기존 defineConfig를 재사용하는 것도 가능했으나, 오히려 가독성이 떨어진다고 판단했습니다. 기존에 global, light theme, dark theme 빌드를 3번 진행했다면 이제는 global, light theme로 묶어서 빌드를 1번 진행하고, dark theme로 따로 한번 더 진행합니다. 스타일 시트를 확인해보면, global token 영역에 공통 semantic token도 포함되어 있는 걸 확인하실 수 있습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1769 - https://github.com/tokens-studio/sd-transforms/tree/main : composite token transformer 구현 참고
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - Fixes #1777 ## Summary <!-- Please brief explanation of the changes made --> - styled component 의 foundation 객체를 사용한 스타일링을 css variable 로 변환하는 codemod 를 추가합니다. - 변환 결과의 전 후를 보려면 테스트 코드나 이슈를 참조해주세요. ## Details <!-- Please elaborate description of the changes --> - theme, rounding, border, elevation, transition 에 대하여 개별로 transform 함수를 작성해서, 사용처에서 하나씩 사용하거나 한꺼번에 사용할 수 있게 했습니다. theme 마이그레이션만 해도 몇 백 줄이 변하기 때문에 개별적으로 적용할 수 있게 열어주는 게 좋을 것 같았습니다. spacing 은 데스크 코드에서 사용처가 없기 때문에 손으로 지워도 되리라 생각합니다. - 어플리케이션에서 테스트 해보려면 @channel.io/bezier-codemod 패키지를 빌드 한 후 아래 명령어로 테스트 가능합니다. 테스트 결과 80\~90% 이상 커버를 해주는 것을 확인했습니다. 동작 속도는 개별 transform 별로 30초~1분 정도 걸립니다. ``` npx bezier-react/packages/bezier-codemod/node_modules/.bin/bezier-codemod ``` - transform 이 커버하지 못하는 코드 조각은 다음과 같습니다. 아래와 같은 코드를 만났을 경우 처리하지 않고 그대로 두는 것이 의도입니다. 이에 대한 테스트 코드 또한 별도로 작성했습니다. **argument 가 foundation 이외에 여러 개 있을 경우** ```typescript const div = styled.div` ${({ foundation, isRounding }) => isRounding && foundation?.elevation?.ev3()}; ` ``` **constant 를 사용하는 경우** ```typescript background-color: ${({ foundation }) => foundation?.theme[SOME_CONSTANT]}; ``` - transform 이 끝나면 바뀐 파일 갯수를 2배로 보여주는 버그가 있습니다. 아래 코드에서 파일이 두 번씩 들어가서 그런 것 같은데, 아직 정확한 원인은 찾지 못했습니다. 여기서 바로 해결하지 않고 이슈로 남겨두겠습니다. App.tsx ```typescript const sourceFiles = project.addSourceFilesAtPaths(filePath) ``` ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1777 - [AST viewer](https://ts-ast-viewer.com/#code/FAYw9gdgzgLgBAYTAW2QQwgEzgXjrATwBsBTTAOkwEsA3AA2DjgBIBvAClbmqjQCNS2AL4BKXAD5GTblV4CycAGSKpTEFCgNp05YritV2lhy4AzMAFcsaGFUhxREw0bjmrmG3YgB+cjABOGFBUtpDkAOYkMAAqgdAhXlAIAMrJ7ADazi5wAOR8aCAA1uH+llgAtOBEYP45ADRZLjlVNfWNRjlgAA4FIQRt2dIAuiJCWWPadGN0QA)
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Minor Changes - Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. ([#1781](#1781)) by @yangwooseong They cover theme, transition, elevation, rounding, and border of foundation. ## @channel.io/[email protected] ### Minor Changes - Implement multi theme feature based on data attributes. ([#1756](#1756)) by @sungik-choi ## @channel.io/[email protected] ### Minor Changes - Add composition tokens, such as box-shadow. ([#1769](#1769)) by @sungik-choi - Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. ([#1769](#1769)) by @sungik-choi - Add z-index and opacity tokens. ([#1766](#1766)) by @sungik-choi - Add categories by token to the JavaScript build file. ([#1766](#1766)) by @sungik-choi ### Patch Changes - Remove duplicate styles in styles.css ([#1779](#1779)) by @sungik-choi ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 지원중지된 `LegacySegementedControl` 컴포넌트를 제거합니다. 해당 컴포넌트에만 사용하고 있던 타입 및 유틸 함수를 함께 제거합니다. ## Details <!-- Please elaborate description of the changes --> - 채널 데스크 기준 사용처가 없으며, `SegmentedControl` 컴포넌트가 상위 호환으로서 완벽하게 대체가 가능한 컴포넌트이기때문에 제거합니다. - 해당 컴포넌트에서 사용하고 있었던 타입 및 유틸 함수를 제거합니다. `ProgressBar` 에서 사용중이던 유틸은 적절한 다른 유틸 함수로 변경했습니다. 기존 동작과 100% 동일하지 않을 수 있으나, 문제 없을 것으로 판단됩니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes. Changeset에 명시해두었습니다. ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1578 (Remove some deprecated components)
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - FIxes #1778 ## Summary <!-- Please brief explanation of the changes made --> - Mixin interpolation 을 css variable 을 사용한 스타일 코드로 변환하는 codemod 를 추가합니다. - As-is ```typescript import { styled, inputWrapperStyle, focusedInputWrapperStyle, erroredInputWrapperStyle, } from '@channel.io/bezier-react' const Wrapper = styled.div` position: relative; background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lightest']}; border-radius: 12px; ${inputWrapperStyle}; ${({ focus }) => focus && focusedInputWrapperStyle}; ${({ focus, whisper }) => focus && whisper && erroredInputWrapperStyle}; ` ``` - To-be ```typescript import { styled, css } from '@channel.io/bezier-react' const Wrapper = styled.div` position: relative; background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lightest']}; border-radius: 12px; box-shadow: var(--input-box-shadow); ${({ focus }) => focus && css` box-shadow: var(--input-box-shadow-focused); `}; ${({ focus, whisper }) => focus && whisper && css` box-shadow: var(--input-box-shadow-invalid); `}; ` ``` ## Details <!-- Please elaborate description of the changes --> - import 관련 유틸을 추가합니다. - 여러 줄에 걸친 코드로 변경할 때 인덴트까지 잘 유지하면서 변경하는 것이 쉽지 않아서, 이 부분은 사용처의 포매팅을 기대해야 할 것 같네요. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - [Ts-morph](https://ts-morph.com/) - [AST Viewer](https://ts-ast-viewer.com/#code/JYWwDg9gTgLgBAbzgKDnAzjAngGwKYAmANCmsAHZgCuMA6lAIZhh5QDK2+JqcAZhAGMq6QgElKNekxbtOebmlZRoYiXUbNWHXPOQBfPspBwA5AAEBACwblyeHADpgEAPQAjPAC9grALRQ8BgEYE2RkAQhyTDgpTSg4AF4MOQIHAmAANwADHkh0YBhncgAuOACcBkKMvABuHjcggGsAc2UqcgJfCJxoUoASBAAKJH52gkqiuD0ASkSAPh40UY6JyIB+BxhLPBA8DYBtEzdm31a8LF8cYGbLGDxMEwBdPTq0N2gCP0Z04VKARgATGAAB6vOADCjUdTSLRyF48AbDPiCYRTWYJObIoToOAAMlxWOEqihsRk2nw8LQiJGKPQJAA7pZgOgZGj5oScfi4IzmayuUoVARxCSNGS4XUskA)
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 라이브러리 사용처에 제공되는 CSS output(style.css)의 용량을 줄입니다. ## Details <!-- Please elaborate description of the changes --> [rollup-plugin-postcss](https://www.npmjs.com/package/rollup-plugin-postcss)의 minify 옵션을 사용해서 내부의 [CSS Nano](https://cssnano.co/)를 통해 구현할 수 있었습니다. 하지만 CSS Nano로는 '중복되는 Cascade layer 블록을 합쳐주면 좋겠다' 라는 요구사항을 충족하지 못했습니다. 아래와 같은 상황입니다. ```css /* AS-IS */ @layer foo { .a { } } @layer foo { .b { } } /* TO-BE */ @layer foo { .a { } .b { } } ``` 새로운 스타일 시스템의 components layer에선 CSS modules를 사용하게되면서, 각 css module 파일을 `@layer components` 로 감싸게 됩니다. 이를 빌드 시 `style.css` 로 병합하는 과정에서, 중복된 `@layer components` 블록이 생기게됩니다. Parcel에서 기본적으로 제공하고, Vite에서 CSS를 처리하는 데 옵셔널로 사용할 수 있는 lightning CSS에서 이 기능이 구현되어 있었습니다. (parcel-bundler/lightningcss#216) 이 기능만을 사용하기 위해서 번들러를 변경하거나, 혹은 lightning CSS가 CSS 전처리기를 지원하지 않는 이유로 SCSS module을 CSS module로 변경하는 작업은 불필요하다고 판단했습니다. 따라서 build generate과정에서 만들어진 `style.css` 를 lightning css의 node 패키지를 통해 최적화하는 작업을 수행하도록 했습니다. 추가로, minify시에도 줄어들지 않는 className이나 css variable property name의 길이를 함께 조금 줄이는 작업을 진행했습니다. - css module class name의 길이를 디버깅 시 가독성을 해치지 않는다고 판단하는 선에서 줄였습니다. - css variable의 `--bezier` prefix를 `--b` 로 줄였습니다. - 그 과정에서 Spinner에 누락되어있던 css variable 관련 style util을 적용했습니다. 그 외: `style.css` 을 `styles.css` 로 변경합니다. bezier-tokens와 통일하기 위해서입니다. ### Diff ef56dc1 commit 기준 - AS-IS: 22K - TO-BE: 17K (약 -23%) ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://lightningcss.dev/docs.html - parcel-bundler/lightningcss#211 - parcel-bundler/lightningcss#216
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - Fixes #1782 ## Summary <!-- Please brief explanation of the changes made --> - #1787 베이스이기 때문에 앞선 pr이 머지되면 rebase 후 오픈 예정입니다. - `@channel.io/bezier-react`에서 `styled` 객체를 import 하던 것을 `styled-components`에서 import 하는 것으로 변경하도록 하는 codemod 를 추가합니다. As-is ```tsx import { styled, Button } from "@channel.io/bezier-react"; export const Wrapper = styled(Button)``; ``` To-be ```tsx import styled from "styled-components"; import { Button } from "@channel.io/bezier-react"; export const Wrapper = styled(Button)``; ``` ## Details <!-- Please elaborate description of the changes --> - `styled` 만 import 하고 있는 경우에는 import 문 자체를 없애야 합니다. 이를 위해 `ImportDeclaration.remove()` 함수를 호출하면 뒤에 있는 개행을 제거하는 이슈가 있습니다. ts-morph 레포에 이슈를 남겨둔 상황인데, 원인을 파악하기 못한다면 어플리케이션 쪽에서 대응해야 할 것 같습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - dsherret/ts-morph#1483
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 스토리북에 `AlphaAppProvider` 를 적용합니다. ## Details <!-- Please elaborate description of the changes --> - CSS variable 테스트를 할 수 있도록 환경을 구축합니다. #1733 마이그레이션이 완료되면, BezierProvider를 제거할 수 있습니다. - 중복되거나 불필요한 글로벌 스타일, Provider를 제거했습니다. <img width="926" alt="image" src="https://github.com/channel-io/bezier-react/assets/58209009/d52ff885-768b-4e0e-a861-f58d1ce14a37"> 적용된 모습 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - Fixes #2078 ## Summary <!-- Please brief explanation of the changes made --> remove Alpha prefix from AlphaSmoothCornersBox ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [lightningcss](https://togithub.com/parcel-bundler/lightningcss) | [`1.24.0` -> `1.24.1`](https://renovatebot.com/diffs/npm/lightningcss/1.24.0/1.24.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>parcel-bundler/lightningcss (lightningcss)</summary> ### [`v1.24.1`](https://togithub.com/parcel-bundler/lightningcss/releases/tag/v1.24.1) [Compare Source](https://togithub.com/parcel-bundler/lightningcss/compare/v1.24.0...v1.24.1) - Disabled CSS `transform` optimizations using `matrix()`, which could break transitions and animations. – [https://github.com/parcel-bundler/lightningcss/pull/694](https://togithub.com/parcel-bundler/lightningcss/pull/694) - Merge `@supports` declarations with the same property (minus vendor prefix) and value – [`6bd2761`](https://togithub.com/parcel-bundler/lightningcss/commit/6bd2761badb9d5434783acffcae35ef6c3311e06) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "on Monday after 10am before 7pm" in timezone Asia/Seoul, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/channel-io/bezier-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNDUuMCIsInVwZGF0ZWRJblZlciI6IjM3LjI0NS4wIiwidGFyZ2V0QnJhbmNoIjoiYWxwaGEifQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@swc/core](https://swc.rs) ([source](https://togithub.com/swc-project/swc)) | [`1.4.6` -> `1.4.8`](https://renovatebot.com/diffs/npm/@swc%2fcore/1.4.6/1.4.8) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>swc-project/swc (@​swc/core)</summary> ### [`v1.4.8`](https://togithub.com/swc-project/swc/blob/HEAD/CHANGELOG.md#148---2024-03-14) [Compare Source](https://togithub.com/swc-project/swc/compare/v1.4.7...v1.4.8) ##### Bug Fixes - **(es/module)** Fix regression of resolving relative modules ([#​8748](https://togithub.com/swc-project/swc/issues/8748)) ([f988b66](https://togithub.com/swc-project/swc/commit/f988b66e1fd921266a8abf6fe9bb997b6878e949)) - **(es/parser)** Allow `export` after decorators when valid ([#​8739](https://togithub.com/swc-project/swc/issues/8739)) ([663261b](https://togithub.com/swc-project/swc/commit/663261be97364911e7b57eab0560ee48e53d8f33)) ##### Miscellaneous Tasks - **(es)** Allow using older `tokio` ([#​8740](https://togithub.com/swc-project/swc/issues/8740)) ([9c1eb01](https://togithub.com/swc-project/swc/commit/9c1eb017fcd90bd21b43f1a988c7fc67639343c1)) ### [`v1.4.7`](https://togithub.com/swc-project/swc/blob/HEAD/CHANGELOG.md#147---2024-03-13) [Compare Source](https://togithub.com/swc-project/swc/compare/v1.4.6...v1.4.7) ##### Bug Fixes - **(es/minifier)** Fix eval of `toString` of array with holes ([#​8727](https://togithub.com/swc-project/swc/issues/8727)) ([f3fbd9d](https://togithub.com/swc-project/swc/commit/f3fbd9d54925b708139a37865508430cdcb98f9a)) - **(es/minifier)** Do not evaluate `slice` calls with negative index ([#​8726](https://togithub.com/swc-project/swc/issues/8726)) ([23f9635](https://togithub.com/swc-project/swc/commit/23f9635d2cb523d63e5d1611dcf55922bcc54a87)) - **(es/minifier)** Handle cyclic references while dropping unused properties ([#​8725](https://togithub.com/swc-project/swc/issues/8725)) ([102241b](https://togithub.com/swc-project/swc/commit/102241b812b8e815b59575178193bb71b4264bab)) - **(es/minifier)** Fix evaluation of array literals with `void 0` ([#​8733](https://togithub.com/swc-project/swc/issues/8733)) ([aa0154d](https://togithub.com/swc-project/swc/commit/aa0154d2d86b0bed7ffed3324c7a650ffe111c93)) - **(es/minifier)** Fix removal of array pattern bindings ([#​8730](https://togithub.com/swc-project/swc/issues/8730)) ([312f0d8](https://togithub.com/swc-project/swc/commit/312f0d8427b3c4436b491ed4265f9469dc017f8f)) - **(es/minifier)** Make `Finalizer` handle `hoisted_props` correctly ([#​8738](https://togithub.com/swc-project/swc/issues/8738)) ([95761b7](https://togithub.com/swc-project/swc/commit/95761b76bf09a4d2c09517b2bd7bf7b78ee2149f)) - **(es/proposal)** Fix var placement for using transform ([#​8732](https://togithub.com/swc-project/swc/issues/8732)) ([633cd89](https://togithub.com/swc-project/swc/commit/633cd89bacef5f0efef20f1dfa709cff1ecba36f)) ##### Features - **(es/lints)** Add `no-prototype-builtins` rule ([#​8684](https://togithub.com/swc-project/swc/issues/8684)) ([a5dbb17](https://togithub.com/swc-project/swc/commit/a5dbb17612327c66366086f99b44c6731d125ffc)) - **(es/lints)** Add `prefer-object-spread` rule ([#​8696](https://togithub.com/swc-project/swc/issues/8696)) ([aa9297b](https://togithub.com/swc-project/swc/commit/aa9297b42e001f6b7319881870f6012a56c50aef)) ##### Refactor - **(es)** Prepare `wasm32-wasi-preview1-threads` target support ([#​8724](https://togithub.com/swc-project/swc/issues/8724)) ([e3acd14](https://togithub.com/swc-project/swc/commit/e3acd1476c2428e5329a359bb7323687c06108d2)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "on Monday after 10am before 7pm" in timezone Asia/Seoul, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/channel-io/bezier-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNDUuMCIsInVwZGF0ZWRJblZlciI6IjM3LjI0NS4wIiwidGFyZ2V0QnJhbmNoIjoiYWxwaGEifQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [postcss](https://postcss.org/) ([source](https://togithub.com/postcss/postcss)) | [`8.4.35` -> `8.4.36`](https://renovatebot.com/diffs/npm/postcss/8.4.35/8.4.36) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>postcss/postcss (postcss)</summary> ### [`v8.4.36`](https://togithub.com/postcss/postcss/blob/HEAD/CHANGELOG.md#8436) [Compare Source](https://togithub.com/postcss/postcss/compare/8.4.35...8.4.36) - Fixed `original.column are not numbers` error on broken previous source map. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "on Monday after 10am before 7pm" in timezone Asia/Seoul, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/channel-io/bezier-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNDUuMCIsInVwZGF0ZWRJblZlciI6IjM3LjI0NS4wIiwidGFyZ2V0QnJhbmNoIjoiYWxwaGEifQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@types/node](https://togithub.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node) ([source](https://togithub.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node)) | [`20.11.26` -> `20.11.28`](https://renovatebot.com/diffs/npm/@types%2fnode/20.11.26/20.11.28) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Configuration 📅 **Schedule**: Branch creation - "on Monday after 10am before 7pm" in timezone Asia/Seoul, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/channel-io/bezier-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNDUuMCIsInVwZGF0ZWRJblZlciI6IjM3LjI0NS4wIiwidGFyZ2V0QnJhbmNoIjoiYWxwaGEifQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
](https://renovatebot.com){kind=link}
…2049) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - #2076 ## Summary <!-- Please brief explanation of the changes made --> - radix-ui의 Tooltip, Dialog 래퍼 컴포넌트인 TooltipPrimitive, DialogPrimitive 컴포넌트를 추가합니다. 사용처에서 Tooltip, Dialog의 동작만 필요한 경우 스타일 오버라이드 없이 radix-ui의 동작을 그대로 가져다가 사용하기 위해 추가했습니다. 사용처에서 radix-ui를 설치하여 사용할 수 있지만, bezier-react 컴포넌트들간 동일한 버전의 radix-ui 패키지를 사용하여, 미래에 버전이 달라서 발생할 수 있는 문제를 사전에 막고자 했습니다. - `/alpha` 디렉토리에서 실험적인 알파 버전 컴포넌트에 접근하여 사용할 수 있도록 빌드 설정을 변경했습니다. 추후에도 `Alpha` prefix를 붙이는 대신 해당 디렉토리에 컴포넌트를 추가하는 방식으로 변경하고자 합니다. (TODO: 문서 수정) - 이후 `LegacyTooltip` 을 제거하고 애플리케이션의 사용처를 `TooltipPrimitive` 로 대체할 수 있을 거 같습니다. ## Details <!-- Please elaborate description of the changes --> ### 고민했던 점들 - **왜 모든 radix-ui primitive 컴포넌트들을 export하지 않았는가** : 채널 애플리케이션에서 필요한 경우 추가해도 무방하다고 생각했습니다. 사용할지 안할지도 모르는 컴포넌트를 추가해버리면 불필요한 Breaking change만 발생합니다. - **왜 Tooltip/DialogPrimitive에 z-index를 추가해서 export하지 않았는가** : z-index token을 적용한 채로 export하는 것을 고민했으나, 헤드리스 컴포넌트라는 점을 고려했을 때 토큰과의 의존성을 제거하는 게 컴포넌트의 역할에 더 적절하다고 생각했습니다. 필요하다면 추후에 추가하려고 합니다. - 단위 테스트와 스토리북?: 단위 테스트를 추가한다면 동작을 어디까지 테스트해야하는지 고민입니다. primitive의 일부 기능만 사용한 컴포넌트라면 해당 기능만 테스트하면 될텐데, radix-ui를 그대로 export한 컴포넌트라면 어디까지 동작을 보장해야하는지(어떤 방식으로 사용될 지 모르므로) 의문입니다. 스토리북은 radix-ui의 문서를 참고하는 게 더 유용할 거라 생각했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References - [/alpha 관련 스레드](https://desk.channel.io/root/groups/WebBezier-124831/65f3e34745f48746fcea)
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Major Changes - **Breaking Changes: `AlphaSmoothCornersBox` component is now `SmoothCornersBox` component.** ([#2079](#2079)) by @sungik-choi ### Minor Changes - Add the `TooltipPrimitive` component, which is the same as the [`Tooltip` component in radix-ui](https://www.radix-ui.com/primitives/docs/components/tooltip). You can use it by importing it from the `/alpha` path. ([#2049](#2049)) by @sungik-choi ```tsx import { TooltipPrimitive, TooltipPrimitiveArrow, TooltipPrimitiveContent, TooltipPrimitivePortal, TooltipPrimitiveProvider, TooltipPrimitiveTrigger, } from "@channel.io/bezier-react/alpha"; ``` - Add the `DialogPrimitive` component, which is the same as the [`Dialog` component in radix-ui](https://www.radix-ui.com/primitives/docs/components/dialog). You can use it by importing it from the `/alpha` path. ([#2049](#2049)) by @sungik-choi ```tsx import { DialogPrimitive, DialogPrimitiveClose, DialogPrimitiveContent, DialogPrimitiveDescription, DialogPrimitiveOverlay, DialogPrimitivePortal, DialogPrimitiveTitle, DialogPrimitiveTrigger, } from "@channel.io/bezier-react/alpha"; ``` ## [email protected] ### Patch Changes - Enhance icon extract logic by catching error ([#2073](#2073)) by @yangwooseong - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> Add deprecation warning to LegacyStack storybook docs ## Details <!-- Please elaborate description of the changes --> 스토리북 문서에 사용 금지 경고 문구를 추가합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://storybook.js.org/docs/writing-docs/mdx#linking-to-other-stories-and-pages
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> Dialog/TooltipPrimitive의 스토리북 문서를 추가합니다. ## Details <!-- Please elaborate description of the changes --> - 스토리북에 primitive 컴포넌트를 추가해서 다른 팀원들이 컴포넌트의 존재를 알 수 있도록 했습니다. - 컴포넌트명이 radix-ui와 완벽하게 동일하지는 않기 때문에, 사용자의 이해를 돕고자 mdx를 사용, Anatomy 항목을 추가했습니다. - 스토리북 전체: stories.mdx -> .mdx 로 일괄 변경했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - Fixes #1748 - Fixes #1432 ## Summary <!-- Please brief explanation of the changes made --> - https://github.com/channel-io/shared-configs 팀 공용 설정 파일을 바탕으로 configs/ 하위에 레포지토리 공용 eslint, typescript config를 설정합니다. - supports/ 하위보다 더 명확한 디렉토리명이라고 판단하여 이름 변경 - 전반적으로 중복되는 설정들을 공용 설정으로 이동하고 제거했습니다. ## Details <!-- Please elaborate description of the changes --> - eslint의 import/order 규칙을 단순하게 통일하게 되면서 일부 order 변경이 있습니다 - 브라우저용/노드용 패키지를 구분하여 typescript config를 만들었습니다. - tsconfig의 include 패턴에 와일드카드를 사용하여 단순화했습니다. 와일드 카드를 사용할 필요가 없는 케이스도 마찬가지로 단순화했습니다. (`src/**/*` -> `src`) - tsconfig의 exclude 패턴에 불필요한 패턴을 정리했습니다 (예: node_modules) - typescript 버전을 v5.4로 업데이트합니다. - `ttypescript` : 패키지가 v5와 호환되지 않아서 ts-patch 라이브러리로 대체합니다 - cevek/ttypescript#147 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://github.com/channel-io/shared-configs
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - #2096 ## Summary <!-- Please brief explanation of the changes made --> [89809dc](89809dc) 부터 리뷰할 수 있습니다. Prettier를 설치하고 팀 공용 prettier config를 설정합니다. ## Details <!-- Please elaborate description of the changes --> - prettier config와 충돌하는 eslint/stylelint rule을 제거했습니다 (789c2e9) - prettier를 위한 vscode 에디터 설정을 추가했습니다 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://github.com/channel-io/shared-configs/tree/main/packages/prettier-config
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 2ff4dd1 커밋만 봐주시면 됩니다. bezier-react의 타입 빌드 설정을 개선합니다. ## Details <!-- Please elaborate description of the changes --> `include` 옵션에 필요한 엔트리 포인트 파일만을 지정해서, 접근 가능한 코드가 아니라면 타입 선언을 생성하지 않도록 했습니다. 불필요해진 `exclude` 옵션을 제거합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 새로운 채널톡 로고 및 아이콘을 스토리북에 적용합니다. ## Details <!-- Please elaborate description of the changes --> - 스토리북 좌측 브랜드 이미지에 새로운 채널톡 영문 로고를 사용했습니다. - 이전 채널톡 아이콘 이미지 링크를 새로운 채널톡 링크로 교체했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - #774 ## Summary <!-- Please brief explanation of the changes made --> - 베지어 토큰의 자동완성을 VS Code extension 으로 지원하기 위한 패키지를 추가합니다. ## Details <!-- Please elaborate description of the changes --> - 기본적으로 [MS 가이드](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide)와 [polaris-vscode](https://github.com/Shopify/polaris/tree/main/polaris-for-vscode) 를 참고하면서 만들었습니다. - 스타일링하고자 하는 css property 에 맞춰서 적절한 token 이 자동완성 리스트에 뜨도록 했습니다. 예) color, background-color 라면 `--bgtxt-white-normal`, `--bdr-white` 등, box-shadow 라면 `--ev-3` 이 뜨도록 - 명확한 원인은 모르겠으나 ts파일에서는 '--bgtxt' 을 입력하더라도 '--' 가 매칭이 안됩니다. 그래서 사용할 때는 var() 입력, 괄호 안에서 **'--'를 입력하지 않고** bgtxt 입력 후 자동완성 통해서 var(--bgxt-white-normal) 이 완성되는 흐름입니다. scss 파일에서는 --로 시작하는 텍스트라도 잘 필터링 되기 때문에 문제가 없습니다. 아마 ts 파일에서는 '-' 로 시작할 때 auto completion 이 안되는 게 원인인 것 같은데, 이것을 어떻게 해야 되게 하는지를 못찾았습니다. VS Code 자체적으로 막아놓은 게 아닐까 추측하고 있는 상태입니다. https://github.com/channel-io/bezier-react/assets/28595102/8fc36735-9449-47c0-8264-d906968e092a - 테스트 하려면 yarn dev 실행 후 VS Code > run > start debugging 실행하면 됩니다. 괜찮다 싶으면 머지 후 배포하고, 위키에 개발/배포 방법을 추가하면 될 것 같습니다. ### Todos - [ ] 가이드 따라서 배포 하고 테스트 하기 - [ ] 위키에 개발 / 배포 방법 명시하기 - [ ] 베지어 루트 readme 에 추가하기 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://code.visualstudio.com/api/language-extensions/language-server-extension-guide - https://github.com/Shopify/polaris/tree/main/polaris-for-vscode
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - None ## Summary <!-- Please brief explanation of the changes made --> - bezier-vscode 는 vsce 라는 툴로 publish 하기 때문에 npm registry 에 등록될 필요가 없습니다. 따라서 private 속성을 true 로 합니다. - README 에 bezier-vscode 를 추가합니다. ## Details <!-- Please elaborate description of the changes --> ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Minor Changes - Create a package to support autocomplete for Bezier Design Tokens ([#2091](#2091)) by @yangwooseong Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - 불필요하게 들어간 `@deprecated` 주석을 제거합니다. ## Details <!-- Please elaborate description of the changes --> - 라이브러리 내 다른 `@deprecated` 주석은 문제 없었습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - 74af7a1#diff-89d4379b39e335e4b717ed6126e27652ffa85b341ce8b24fc7792d534be24bd5
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> rm unnecessary stylelintignore & upgrade stylelint ## Details <!-- Please elaborate description of the changes --> 생략
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - Fixes #2116 ## Summary <!-- Please brief explanation of the changes made --> Remove the default offset value in Toast ## Details <!-- Please elaborate description of the changes --> Toast 컴포넌트에서 기본값으로 가지고 있던, 채널 데스크 애플리케이션 종속적인 left offset 상수를 기본값에서 제거합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes. 필요한 경우 사용처에서 직접 `left: 68` 값을 주어 사용해야합니다.
#2118) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary 왜인지 자주 실패하는 Toast의 autoDismiss 관련 비동기 테스트 케이스의 타이밍을 수정해봅니다. dismiss 되는 딜레이를 줄이고, 테스트 케이스의 timeout을 100에서 1000으로 늘렸습니다.
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - Fixes #1879 ## Summary <!-- Please brief explanation of the changes made --> Remove `color` props from `Tag` component & TagBadge common type ## Details - `Tag` 컴포넌트에서 `color` 속성을 제거하고, `variant` 속성을 통해서만 스타일링할 수 있도록 합니다. 마찬가지로 불필요한 `TagBadgeBgColorPreset` 을 제거합니다. - `TagBadgeCommon` 의 스타일을 `Tag` 와 `Badge` 에서 import하여 조립해 사용하는 대신, 스타일이 포함된 `BaseTagBadge` 컴포넌트를 만들고 재사용하도록 했습니다. 또한 Size, Variant type을 각 컴포넌트에서 직접 정의하여 사용하도록 변경했습니다. 이 방식이 현재 components 디렉토리 내부 구성 방식-컴포넌트명이 폴더-에 더 적합하다고 판단했습니다. <!-- Please elaborate description of the changes --> ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Major Changes - **Breaking changes: Remove TagBadge-related types** ([#2114](#2114)) by @sungik-choi - Remove `color` prop of `TagProps` and `TagBadgeBgColorPreset`. - Remove `TagBadgeSize`. Please change it to `TagSize` and `BadgeSize`. - Remove `TagBadgeVariant`. Please change it to `TagVariant` and `BadgeVariant`. - **Breaking Changes: Remove the default offset(`GNB_WIDTH`) in `Toast`** ([#2117](#2117)) by @sungik-choi Remove the style because it was dependent on a specific application. Use `{ left: 68 }` instead. ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…2120) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> 사용성을 위해 Toast에 offset에 특정 값을 하나만 지정해도(예: `{ left: 20 }`) 다른 속성값들에 기본값이 지정되도록 개선합니다. ## Details <!-- Please elaborate description of the changes --> 생략 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.